<template>
	<div class="wrap">
		<div class="allmap" ref='allmap'></div>
		<div class="map_bottom" ref='map_bottom'>
			<div class="slide_down"><span class="iconfont" @click='isHide'>{{isUpAndDown}}</span></div>
			<div class="wrapper" :class="[headerScroll]" ref='guess'>
				 <ul>
					 <li v-for="(item,index) of list" :key="index">
						 <span class="line" @click='ShowClass(index)' :class="[Num == index?'active':'']">{{item.tabs}}</span>
					 </li>
				 </ul>
				 <div class="address" v-for='(item,index) of addressLists[this.Num]' :key='item.id' @click='MapChange(index)' :class="[isMapNum == index?'isActive':'']">
				 	<div class="address_title">{{item.title}}</div>
				 	<div class="address_desc">{{item.desc}}</div>
				 </div>
			</div>
			
		</div>
	</div>
</template>
<script>
export default {
  name: 'mapContent',
  data(){
  	  return{
		  isActive:'',
		  addressLists:[
			  [
				  {
					  id:'1',
					  title:'上海客莱福诺富特酒店(原康桥诺富特酒店)',
					  desc:'秀浦路3188弄1号楼',
					  address:'秀浦路3188弄1号楼'
				  },
			  ],
			  [
				  {
					  id:'1',
					  title:'上海迪士尼乐园',
					  desc:'上海市浦东新区川沙新镇上海迪士尼度假区',
					  address:'上海迪士尼乐园'
				  },
				   {
					  id:'2',
					  title:'上海野生动物园',
					  desc:'上海市浦东新区南六公路178号',
					  address:'上海市浦东新区南六公路178号'
				  },
				   {
					  id:'3',
					  title:'上海海昌海洋公园',
					  desc:'上海市浦东新区南汇新城镇银飞路166号',
					  address:'上海市浦东新区南汇新城镇银飞路166号'
				  }
			  ]
		  ],
  		  list:[
  			  {
  				  tabs:'酒店',
  				  
  			  },
  			  {
  				  tabs:'景点',
  			  },
  		  ],
  		  Num:0,
  		  active:'',
  		  headerScroll:'',
		  isShow:true,
		  isUpAndDown:'\ue6b1',
		  isMapNum:0
  	  }
  },
  methods:{
	  ShowClass(index){//点击页面滑动
		  this.Num = index
		  this.isMapNum=0
	  },
	  isHide(){
		  if(this.isShow==true){
			  this.isUpAndDown='\ue63a'
			  this.$refs.allmap.style.height='10%'
		  }else{
			  this.isUpAndDown='\ue6b1'
			  this.$refs.allmap.style.height='8rem'
		  }
		  this.isShow=!this.isShow
		 
		  
	  },
	  MapChange(index){
		  this.isMapNum = index
	  },
	  addMasker(m,n){
		  let map = new BMap.Map(this.$refs.allmap); //添加标注
		  var myGeo = new BMap.Geocoder(); //逆地址解析
		  for(let i=0;i<this.addressLists.length;i++){//地址转换成经纬度
			  for(let j=0;j<this.addressLists[i].length;j++){
				  let title=this.addressLists[m][n].title
				  myGeo.getPoint(this.addressLists[i][j].address, function(point){
					  if(point){
						  if(i===m&&j===n){
							  map.centerAndZoom(point, 15);      
							  map.addOverlay(new BMap.Marker(point));  
							  //信息窗口
							  let infoWindow = new BMap.InfoWindow(title)
							  map.openInfoWindow(infoWindow, map.getCenter())
						  }
					  }else{
						  console.log('找不到')
					  }
				   },"上海市")
			  }
		  }
	  }
  },
  mounted(){
	  this.isActive='isActive'
	  this.addMasker(this.Num,this.isMapNum)
  },
  watch:{
	 Num(val){
		 this.addMasker(this.Num,this.isMapNum)
	 },
	 isMapNum(){
		 this.addMasker(this.Num,this.isMapNum)
	 }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style type="text/css" scoped>
	.bounce-enter-active,.bounce-leave-active {
	  transition: all .3s ease;
	}
	.bounce-enter, .bounce-leave-to
	{
	  transform: translateY(-6rem);
	  opacity: 1;
	}
	.bounce-enter-to, .bounce-leave
	{
	  transform: translateY(0);
	  opacity: 1;
	}
</style>
<style lang="stylus" scoped>
.wrap
	position:absolute
	width:100%
	top:0
	bottom:0
	background:#fff
	z-index:200
	.allmap
		height:8rem
		width:100%
		border:1px solid #eee
	.map_bottom
		.slide_down
			text-align:center
		.wrapper
			width:100%
			border-bottom:1px solid #ccc
			height:1rem
			.address
				border:1px solid #eee
				width:100%
				padding:0.3rem
				background:#f2f8e9
				.address_title
					margin-bottom:0.2rem
					font-size:0.35rem
					font-weight:bold
				.address_desc
					color:#bbb
			.isActive
				background:#fff
			ul
				width:90%
				margin:0 auto
				display:flex
				li
					-webkit-box-flex: 1;
					-ms-flex: 1;
					flex: 1;
					text-align: center;
					.line
						line-height:1rem
						text-align:center
						font-size:0.35rem
						position: relative;
						padding:0 0.3rem
					.active
						color:#23beae
					.active:after
						display: block;
						content: "";
						width: 100%;
						height: 3px;
						background: #23beae;
						position: absolute;
						bottom: -0.3rem;
						left: 0;
						border-radius: 2px;
		.headerScroll
			position:fixed
			top:0.8rem
			left:0
			z-index:100
			background:#fff
			width:100%
</style>
